<!-- flex 实现demo -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现flex布局大demo</title>
    <style>
        .row_base {
            height: 100px;
            width: 130px;
            background-color: bisque;
        }
    </style>

</head>

<body>
    <ul>
        <p>
                总描述:
        </p>
        <ul>
            <li>flex-direction -- > 决定主轴的方向(即项目的排列方向) </li>
            <li>flex-wrap -- > 决定容器内项目是否可换行 </li>
            <li>justify-content --> 定义了项目在主轴的对齐方式。 </li>
            <li>align-items -- > 定义了项目在交叉轴上的对齐方式</li>
        </ul>
    </li>
    <li>
        <p>flex-direction</p>
        <p>
            该属性总共四个选项：<br>
            .container {<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flex-direction: row | row-reverse | column | column-reverse;<br>
            }<br>
        </p>
        <div style="width: auto;height: auto;">
            容器主轴方向： 横向 ▷ ◁ || 竖向 △ ▽ <br><br>
            主轴方向 指的是容器内子容器如何排布 如下源代码：
            <ul>
                <li>
                    <p>横向排列</p>
                    <div style="display: flex;flex-direction: row;" class="row_base">
                        <div style="height: 20px;width: 20px;background-color: chartreuse;text-align: center;">左
                        </div>
                        <div style="height: 20px;width: 20px;background-color: rgb(149, 187, 112);text-align: center;">
                            中</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(141, 212, 243);text-align: center;">
                            右</div>
                    </div>
                    <p>源代码</p>
                    <textarea name="" id="" cols="100" rows="6">
                                <div style="display: flex;flex-direction: row;" class="row_base">
                                    <div style="height: 20px;width: 20px;background-color: chartreuse;text-align: center;">左</div>
                                    <div style="height: 20px;width: 20px;background-color: rgb(149, 187, 112);text-align: center;">中</div>
                                    <div style="height: 20px;width: 20px;background-color: rgb(141, 212, 243);text-align: center;">右</div>
                                </div>
                            </textarea>
                </li>
                <li>
                    <p>"倒" 横向排列</p>
                    <div style="display: flex;flex-direction: row-reverse;" class="row_base">
                        <div style="height: 20px;width: 20px;background-color: chartreuse;text-align: center;">左
                        </div>
                        <div style="height: 20px;width: 20px;background-color: rgb(149, 187, 112);text-align: center;">
                            中</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(141, 212, 243);text-align: center;">
                            右</div>
                    </div>
                    <p>源代码</p>
                    <textarea name="" id="" cols="100" rows="6">
                                <div style="display: flex;flex-direction: row-reverse;" class="row_base">
                                    <div style="height: 20px;width: 20px;background-color: chartreuse;text-align: center;">左</div>
                                    <div style="height: 20px;width: 20px;background-color: rgb(149, 187, 112);text-align: center;">中</div>
                                    <div style="height: 20px;width: 20px;background-color: rgb(141, 212, 243);text-align: center;">右</div>
                                </div>
                            </textarea>
                </li>
                <li>
                    <p>竖向排列</p>
                    <div style="display: flex;flex-direction: column;" class="row_base">
                        <div style="height: 20px;width: 20px;background-color: chartreuse;text-align: center;">上
                        </div>
                        <div style="height: 20px;width: 20px;background-color: rgb(149, 187, 112);text-align: center;">
                            中</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(246, 146, 100);text-align: center;">
                            下</div>
                    </div>
                    <p>源代码</p>
                    <textarea name="" id="" cols="100" rows="6">
                                <div style="display: flex;flex-direction: column;" class="row_base">
                                    <div style="height: 20px;width: 20px;background-color: chartreuse;text-align: center;">上</div>
                                    <div style="height: 20px;width: 20px;background-color: rgb(149, 187, 112);text-align: center;">中</div>
                                    <div style="height: 20px;width: 20px;background-color: rgb(246, 146, 100);text-align: center;">下</div>
                                </div>
                            </textarea>
                </li>
                <li>
                    <p>"倒" 竖向排列</p>
                    <div style="display: flex;flex-direction: column-reverse;" class="row_base">
                        <div style="height: 20px;width: 20px;background-color: chartreuse;text-align: center;">上
                        </div>
                        <div style="height: 20px;width: 20px;background-color: rgb(149, 187, 112);text-align: center;">
                            中</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(246, 146, 100);text-align: center;">
                            下</div>
                    </div>
                    <p>源代码</p>
                    <textarea name="" id="" cols="100" rows="6">
                                <div style="display: flex;flex-direction: column-reverse;" class="row_base">
                                    <div style="height: 20px;width: 20px;background-color: chartreuse;text-align: center;">上</div>
                                    <div style="height: 20px;width: 20px;background-color: rgb(149, 187, 112);text-align: center;">中</div>
                                    <div style="height: 20px;width: 20px;background-color: rgb(246, 146, 100);text-align: center;">下</div>
                                </div>
                            </textarea>
                </li>
            </ul>
            <div>
                阐述总结：
                <ul>
                    <li>默认值：row，主轴为水平方向，起点在左端。</li>
                    <li>row-reverse：主轴为水平方向，起点在右端</li>
                    <li>column：主轴为垂直方向，起点在上沿</li>
                    <li>column-reverse：主轴为垂直方向，起点在下沿</li>
                </ul>
            </div>
        </div>
    </li>
    <li>
        <p>flex-wrap</p>
        <p>
            该属性总共三个选项：<br>
            .container {<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flex-wrap: nowrap | wrap | wrap-reverse;<br>
            }<br>
        </p>
        <div style="width: auto;height: auto;">
            设定一个行中 排列的容器 超出该行大小是否换行？
            <ul>
                <li>
                    <p>nowrap</p>
                    <div style="height: 50px;width: 80px;display: flex;flex-wrap: nowrap;" class="row_base">
                        <div style="height: 20px;width: 20px;background-color: chartreuse;">A</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(92, 32, 247);">B</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 119);">C</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(223, 237, 18);">D</div>
                        <div style="height: 20px;width: 20px;background-color: chartreuse;">E</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 185);">F</div>
                    </div>
                    <p>源代码</p>
                    <textarea name="" id="" cols="100" rows="9">
                            <div style="height: 50px;width: 80px;display: flex;flex-wrap: nowrap;" class="row_base">
                                <div style="height: 20px;width: 20px;background-color: chartreuse;">A</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(92, 32, 247);">B</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 119);">C</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(223, 237, 18);">D</div>
                                <div style="height: 20px;width: 20px;background-color: chartreuse;">E</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 185);">F</div>
                            </div>
                        </textarea>
                </li>
                <li>
                    <p>wrap</p>
                    <div style="height: 50px;width: 80px;display: flex;flex-wrap: wrap;" class="row_base">
                        <div style="height: 20px;width: 20px;background-color: chartreuse;">A</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(92, 32, 247);">B</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 119);">C</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(223, 237, 18);">D</div>
                        <div style="height: 20px;width: 20px;background-color: chartreuse;">E</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 185);">F</div>
                    </div>
                    <p>源代码</p>
                    <textarea name="" id="" cols="100" rows="9">
                            <div style="height: 50px;width: 80px;display: flex;flex-wrap: wrap;" class="row_base">
                                <div style="height: 20px;width: 20px;background-color: chartreuse;">A</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(92, 32, 247);">B</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 119);">C</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(223, 237, 18);">D</div>
                                <div style="height: 20px;width: 20px;background-color: chartreuse;">E</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 185);">F</div>
                            </div>
                        </textarea>
                </li>
                <li>
                    <p>
                        wrap-reverse
                    </p>
                    <div style="height: 50px;width: 80px;display: flex;flex-wrap: wrap-reverse;" class="row_base">
                        <div style="height: 20px;width: 20px;background-color: chartreuse;">A</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(92, 32, 247);">B</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 119);">C</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(223, 237, 18);">D</div>
                        <div style="height: 20px;width: 20px;background-color: chartreuse;">E</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 185);">F</div>
                    </div>

                    <textarea name="" id="" cols="100" rows="9">
                            <div style="height: 50px;width: 80px;display: flex;flex-wrap: wrap-reverse;" class="row_base">
                                <div style="height: 20px;width: 20px;background-color: chartreuse;">A</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(92, 32, 247);">B</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 119);">C</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(223, 237, 18);">D</div>
                                <div style="height: 20px;width: 20px;background-color: chartreuse;">E</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 185);">F</div>
                            </div>
                        </textarea>
                </li>
            </ul>
            <div>
                阐述总结：
                <ul>
                    <li>默认值：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。</li>
                    <li>wrap：项目主轴总尺寸超出容器时换行，第一行在上方</li>
                    <li>wrap-reverse：换行，第一行在下方</li>
                </ul>
            </div>
        </div>
    </li>
    <li>
        <p>justify-content</p>
        <p>
            该属性总共五个选项：<br>
            .container {<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; justify-content: flex-start | flex-end | center | space-between |
            space-around;<br>
            }<br>
        </p>
        <div style="width: auto;height: auto;">
            <p>一个flex容器中的子容器 遵循什么排列方式？</p>
            <ul>
                <li>
                    <p>flex-start</p>
                    <div
                        style="height: 50px;width: 250px;display: flex;flex-direction: row;justify-content:flex-start; background-color: aqua;">
                        <div style="height: 20px;width: 20px;background-color: chartreuse;margin-right: 10px;">A</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(92, 32, 247);margin-right: 10px;">B
                        </div>
                        <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 119);margin-right: 10px;">C
                        </div>
                        <div style="height: 20px;width: 20px;background-color: rgb(223, 237, 18);margin-right: 10px;">D
                        </div>
                        <div style="height: 20px;width: 20px;background-color: chartreuse;margin-right: 10px;">E</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 185);margin-right: 10px;">F
                        </div>
                    </div><br>
                    源代码 <br>
                    <textarea rows="10" cols="120">
                            <div style="height: 50px;width: 250px;display: flex;flex-direction: row;justify-content:flex-start; background-color: aqua;">
                                <div style="height: 20px;width: 20px;background-color: chartreuse;margin-right: 10px;">A</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(92, 32, 247);margin-right: 10px;">B</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 119);margin-right: 10px;">C</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(223, 237, 18);margin-right: 10px;">D</div>
                                <div style="height: 20px;width: 20px;background-color: chartreuse;margin-right: 10px;">E</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 185);margin-right: 10px;">F</div>
                            </div>
                        </textarea>
                </li>
                <li>
                    <p>flex-end</p>
                    <div
                        style="height: 50px;width: 250px;display: flex;flex-direction: row;justify-content:flex-end; background-color: aqua;">
                        <div style="height: 20px;width: 20px;background-color: chartreuse;margin-right: 10px;">A</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(92, 32, 247);margin-right: 10px;">B
                        </div>
                        <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 119);margin-right: 10px;">C
                        </div>
                        <div style="height: 20px;width: 20px;background-color: rgb(223, 237, 18);margin-right: 10px;">D
                        </div>
                        <div style="height: 20px;width: 20px;background-color: chartreuse;margin-right: 10px;">E</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 185);margin-right: 10px;">F
                        </div>
                    </div><br>
                    源代码 <br>
                    <textarea rows="10" cols="120">
                            <div style="height: 50px;width: 250px;display: flex;flex-direction: row;justify-content:flex-end; background-color: aqua;">
                                <div style="height: 20px;width: 20px;background-color: chartreuse;margin-right: 10px;">A</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(92, 32, 247);margin-right: 10px;">B</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 119);margin-right: 10px;">C</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(223, 237, 18);margin-right: 10px;">D</div>
                                <div style="height: 20px;width: 20px;background-color: chartreuse;margin-right: 10px;">E</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 185);margin-right: 10px;">F</div>
                            </div>
                        </textarea>
                </li>
                <li>
                    <p>center</p>
                    <div
                        style="height: 50px;width: 250px;display: flex;flex-direction: row;justify-content:center; background-color: aqua;">
                        <div style="height: 20px;width: 20px;background-color: chartreuse;margin-right: 10px;">A</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(92, 32, 247);margin-right: 10px;">B
                        </div>
                        <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 119);margin-right: 10px;">C
                        </div>
                        <div style="height: 20px;width: 20px;background-color: rgb(223, 237, 18);margin-right: 10px;">D
                        </div>
                        <div style="height: 20px;width: 20px;background-color: chartreuse;margin-right: 10px;">E</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 185);margin-right: 10px;">F
                        </div>
                    </div><br>
                    源代码 <br>
                    <textarea rows="10" cols="120">
                            <div style="height: 50px;width: 250px;display: flex;flex-direction: row;justify-content:center; background-color: aqua;">
                                <div style="height: 20px;width: 20px;background-color: chartreuse;margin-right: 10px;">A</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(92, 32, 247);margin-right: 10px;">B</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 119);margin-right: 10px;">C</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(223, 237, 18);margin-right: 10px;">D</div>
                                <div style="height: 20px;width: 20px;background-color: chartreuse;margin-right: 10px;">E</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 185);margin-right: 10px;">F</div>
                            </div>
                        </textarea>
                </li>
                <li>
                    <p>space-between</p>
                    <div
                        style="height: 50px;width: 250px;display: flex;flex-direction: row;justify-content:space-between; background-color: aqua;">
                        <div style="height: 20px;width: 20px;background-color: chartreuse;">A</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(92, 32, 247);">B</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 119);">C</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(223, 237, 18);">D</div>
                        <div style="height: 20px;width: 20px;background-color: chartreuse;">E</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 185);">F</div>
                    </div><br>
                    源代码 <br>
                    <textarea rows="10" cols="120">
                            <div style="height: 50px;width: 250px;display: flex;flex-direction: row;justify-content:space-between; background-color: aqua;">
                                <div style="height: 20px;width: 20px;background-color: chartreuse;">A</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(92, 32, 247);">B</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 119);">C</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(223, 237, 18);">D</div>
                                <div style="height: 20px;width: 20px;background-color: chartreuse;">E</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 185);">F</div>
                            </div>
                        </textarea>
                </li>
                <li>
                    <p>space-around</p>
                    <div
                        style="height: 50px;width: 250px;display: flex;flex-direction: row;justify-content:space-around; background-color: aqua;">
                        <div style="height: 20px;width: 20px;background-color: chartreuse;">A</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(92, 32, 247);">B</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 119);">C</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(223, 237, 18);">D</div>
                        <div style="height: 20px;width: 20px;background-color: chartreuse;">E</div>
                        <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 185);">F</div>
                    </div><br>
                    源代码 <br>
                    <textarea rows="10" cols="120">
                            <div style="height: 50px;width: 250px;display: flex;flex-direction: row;justify-content:space-around; background-color: aqua;">
                                <div style="height: 20px;width: 20px;background-color: chartreuse;">A</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(92, 32, 247);">B</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 119);">C</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(223, 237, 18);">D</div>
                                <div style="height: 20px;width: 20px;background-color: chartreuse;">E</div>
                                <div style="height: 20px;width: 20px;background-color: rgb(228, 29, 185);">F</div>
                            </div>
                        </textarea>
                </li>
            </ul>
            <div>
                阐述总结：
                <ul>
                    <li>默认值: flex-start 左对齐</li>
                    <li>flex-end：右对齐</li>
                    <li>center：居中</li>
                    <li>space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。</li>
                    <li>space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。</li>
                </ul>
            </div>


        </div>
    </li>
    <li>
        <p>align-items</p>
        <p>
            该属性总共五个选项：<br>
            .container {<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; align-items: flex-start | flex-end | center | baseline | stretch;<br>
            }<br>
        </p>
        <div style="width: auto;height: auto;">
            <ul>
                <li>
                    <p>flex-start</p>
                    <div style="display: flex;flex-direction: row;align-items: flex-start;height: 300PX;width: 200px;">
                        <div style="width: 20%;height: 20%;background-color: aquamarine;text-align: center;">A</div>
                        <div style="width: 20%;height: 40%;background-color: rgb(207, 246, 68);text-align: center;">B
                        </div>
                        <div style="width: 20%;height: 60%;background-color: rgb(66, 236, 78);text-align: center;">C
                        </div>
                        <div style="width: 20%;height: 80%;background-color: rgb(245, 173, 173);text-align: center;">D
                        </div>
                    </div><br>
                    源代码<br>
                    <textarea rows="7" cols="100">
                            <div style="display: flex;flex-direction: row;align-items: flex-start;height: 300PX;width: 200px;">
                                <div style="width: 20%;height: 20%;background-color: aquamarine;text-align: center;">A</div>
                                <div style="width: 20%;height: 40%;background-color: rgb(207, 246, 68);text-align: center;">B</div>
                                <div style="width: 20%;height: 60%;background-color: rgb(66, 236, 78);text-align: center;">C</div>
                                <div style="width: 20%;height: 80%;background-color: rgb(245, 173, 173);text-align: center;">D</div>
                            </div>
                        </textarea>
                </li>
                <li>
                    <p>flex-end</p>
                    <div style="display: flex;flex-direction: row;align-items: flex-end;height: 300PX;width: 200px;">
                        <div style="width: 20%;height: 20%;background-color: aquamarine;text-align: center;">A</div>
                        <div style="width: 20%;height: 40%;background-color: rgb(207, 246, 68);text-align: center;">B
                        </div>
                        <div style="width: 20%;height: 60%;background-color: rgb(66, 236, 78);text-align: center;">C
                        </div>
                        <div style="width: 20%;height: 80%;background-color: rgb(245, 173, 173);text-align: center;">D
                        </div>
                    </div><br>
                    源代码<br>
                    <textarea rows="7" cols="100">
                            <div style="display: flex;flex-direction: row;align-items: flex-end;height: 300PX;width: 200px;">
                                <div style="width: 20%;height: 20%;background-color: aquamarine;text-align: center;">A</div>
                                <div style="width: 20%;height: 40%;background-color: rgb(207, 246, 68);text-align: center;">B</div>
                                <div style="width: 20%;height: 60%;background-color: rgb(66, 236, 78);text-align: center;">C</div>
                                <div style="width: 20%;height: 80%;background-color: rgb(245, 173, 173);text-align: center;">D</div>
                            </div>
                        </textarea>
                </li>
                <li>
                    <p>center</p>
                    <div style="display: flex;flex-direction: row;align-items: center;height: 300PX;width: 200px;">
                        <div style="width: 20%;height: 20%;background-color: aquamarine;text-align: center;">A</div>
                        <div style="width: 20%;height: 40%;background-color: rgb(207, 246, 68);text-align: center;">B
                        </div>
                        <div style="width: 20%;height: 60%;background-color: rgb(66, 236, 78);text-align: center;">C
                        </div>
                        <div style="width: 20%;height: 80%;background-color: rgb(245, 173, 173);text-align: center;">D
                        </div>
                    </div><br>
                    源代码<br>
                    <textarea rows="7" cols="100">
                            <div style="display: flex;flex-direction: row;align-items: center;height: 300PX;width: 200px;">
                                <div style="width: 20%;height: 20%;background-color: aquamarine;text-align: center;">A</div>
                                <div style="width: 20%;height: 40%;background-color: rgb(207, 246, 68);text-align: center;">B</div>
                                <div style="width: 20%;height: 60%;background-color: rgb(66, 236, 78);text-align: center;">C</div>
                                <div style="width: 20%;height: 80%;background-color: rgb(245, 173, 173);text-align: center;">D</div>
                            </div>
                        </textarea>
                </li>
                <li>
                    <p>baseline</p>
                    <div style="display: flex;flex-direction: row;align-items: baseline;height: 300PX;width: 200px;">
                        <div style="width: 20%;height: 20%;background-color: aquamarine;">
                            <div style="margin-top: 20%;">A</div>
                        </div>
                        <div style="width: 20%;height: 40%;background-color: rgb(207, 246, 68);text-align: center;">B
                        </div>
                        <div style="width: 20%;height: 60%;background-color: rgb(66, 236, 78);text-align: center;">C
                        </div>
                        <div style="width: 20%;height: 80%;background-color: rgb(245, 173, 173);text-align: center;">D
                        </div>
                    </div><br>
                    源代码<br>
                    <textarea rows="7" cols="100">
                            <div style="display: flex;flex-direction: row;align-items: baseline;height: 300PX;width: 200px;">
                                <div style="width: 20%;height: 20%;background-color: aquamarine;">
                                    <div style="margin-top: 20%;">A</div>
                                </div>
                                <div style="width: 20%;height: 40%;background-color: rgb(207, 246, 68);text-align: center;">B</div>
                                <div style="width: 20%;height: 60%;background-color: rgb(66, 236, 78);text-align: center;">C</div>
                                <div style="width: 20%;height: 80%;background-color: rgb(245, 173, 173);text-align: center;">D</div>
                            </div>
                        </textarea>
                </li>
                <li>
                    <p>stretch</p>
                    <div style="display: flex;flex-direction: row;align-items: stretch;height: 300PX;width: 200px;">
                        <div style="width: 20%;height: 20%;background-color: aquamarine;text-align: center;">A</div>
                        <div style="width: 20%;height: 40%;background-color: rgb(207, 246, 68);text-align: center;">B
                        </div>
                        <div style="width: 20%;height: 60%;background-color: rgb(66, 236, 78);text-align: center;">C
                        </div>
                        <div style="width: 20%;height: 80%;background-color: rgb(245, 173, 173);text-align: center;">D
                        </div>
                    </div><br>
                    源代码<br>
                    <textarea rows="7" cols="100">
                            <div style="display: flex;flex-direction: row;align-items: stretch;height: 300PX;width: 200px;">
                                <div style="width: 20%;height: 20%;background-color: aquamarine;text-align: center;">A</div>
                                <div style="width: 20%;height: 40%;background-color: rgb(207, 246, 68);text-align: center;">B</div>
                                <div style="width: 20%;height: 60%;background-color: rgb(66, 236, 78);text-align: center;">C</div>
                                <div style="width: 20%;height: 80%;background-color: rgb(245, 173, 173);text-align: center;">D</div>
                            </div>
                        </textarea>
                </li>
            </ul>
            <div>
                阐述总结：
                <ul>
                    <li>默认值为 stretch 即如果项目未设置高度或者设为 auto，将占满整个容器的高度。</li>
                    <li>flex-start：交叉轴的起点对齐</li>
                    <li>flex-end：交叉轴的终点对齐</li>
                    <li>center：交叉轴的中点对齐</li>
                    <li>baseline: 项目的第一行文字的基线对齐</li>
                </ul>
            </div>
        </div>
    </li>
    </ul>
</body>

</html>